<template>
  <div class="warp container">
  	<div class="header">
      <div class="icon-my" @click="sidebarToggel();"></div>
      <div class="name">书架</div>
      <router-link :to="{path:'/search'}" class="search-icon"></router-link>
    </div>

    <router-link :to="{path:'/'}" class="recommend-tt r-icon1">
      <span class="label">推荐</span>
      <span class="name">格子间女人：感人</span>
    </router-link>


    <div class="list"
      v-infinite-scroll="loadBottom"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10">
        <router-link :to="{path:'/bookdetails/'+item.id}" v-for="item in list">
          <div class="layout1-box">
            <div class="item-l">
              <img :src="item.cover ? item.cover : errorBookDefaultImg" :onerror="errorBookDefaultImg">

              <span class="state" v-if="item.is_finish">完</span>
            </div>
            <div class="item-r">
                <h3 class="item-tt">
                  <span>{{item.title}}</span>
                  <span class="read-state">{{item.not_read_number}}章<i>未读</i></span>
                </h3>
                <p class="item-desc">{{item.intro}}</p>
                <div class="item-info f22">
                  <div class="boogk-state">
                    <p class="time">{{item.create_time}}</p>
                    <p class="read">未读{{item.not_read_number}}/{{item.chapter_number}}</p>
                  </div>
                </div>
            </div>
          </div>
        </router-link>
    </div>
    <div class="loadmore-down">
        <span>{{loadNoData ?'暂无更多数据了!' : '加载中...'}}</span>
    </div>


    <!-- 侧边栏 -->
    <sidebar v-show="sidebar" @onsidebar="sidebarToggel"></sidebar>
     <!-- 底部 -->
      <web-footer active="home"></web-footer>
  </div>
</template>
<script>
    import bookDefaultImg from '@/assets/images/book.png';
    import WebFooter from '../PUBLIC/footer.vue';
    import sidebar from '../components/sidebar.vue';
    export default {
    	name: 'bookshelf',
    	components: {
          WebFooter,
          sidebar
	    },
    	data () {
      		return {
            list:[],
            page:0,
            loading:false,
            loadNoData:false,
            errorBookDefaultImg:'this.src="' + bookDefaultImg + '"',
            recommend:'',
            sidebar:false
	      	}
	    },
      created(){

      },
	    mounted(){

	    },
	    methods:{
	      	back(){
	        	this.$router.go('-1')
	      	},
          menuToggle(){
            this.menuShow = !this.menuShow;
          },
          loadBottom(){
            this.loading = true;
            this.$axios.post(
                this.$store.state.url+"novel_list?device_sn="+this.$store.state.device,
                {device_sn:this.$store.state.device,offset:this.list.length,limit:5}).then(res=>{
                  
                  this.list = this.list.concat(res.data.list);
                  if(res.data.list.length >= 5){
                    console.log(res.data);
                    this.loading = false;
                    ++this.page;
                  }else{
                    this.loadNoData = true;
                  }
            });
          },
          sidebarToggel(){
            this.sidebar = !this.sidebar;
          }
	    }
  	}
</script>
<style lang="scss" scoped>
  .recommend-tt{
    line-height:100px;
    background-color:#fafafa;
    padding:0 30px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    &.r-icon1:after{
      left:auto;
      right:30px;
    }
    span{
      margin:0 10px;
    }
    .label{
      line-height:40px;
      padding:0 20px;
      font-size:22px;
      background-color:#3399fe;
      color:#fff;
      display: inline-block;
      border-radius:5px;
    }
    .name{
      font-size:26px;
      color:#6a6a6a;
    }
  }
  .list{
    a{
      display: block;
      border-bottom:1px solid #f5f5f5;    
      padding:30px 30px;
    }
  }
</style>
